<template>
  <div class="order">
    <CustoMized></CustoMized>
    <ShoppingCart></ShoppingCart>
    <MenuBanner></MenuBanner>
    <!-- 侧边导航栏 -->
    <ul class="kind">
      <li>
        <a href="#0"><MenuKind kindid="0"></MenuKind></a>
      </li>
      <li>
        <a href="#1"><MenuKind kindid="1"></MenuKind></a>
      </li>
      <li>
        <a href="#2"><MenuKind kindid="2"></MenuKind></a>
      </li>
      <li>
        <a href="#3"><MenuKind kindid="3"></MenuKind></a>
      </li>
      <li>
        <a href="#4"><MenuKind kindid="4"></MenuKind></a>
      </li>
      <li>
        <a href="#5"><MenuKind kindid="5"></MenuKind></a>
      </li>
      <li>
        <a href="#6"><MenuKind kindid="6"></MenuKind></a>
      </li>
      <li>
        <a href="#7"><MenuKind kindid="7"></MenuKind></a>
      </li>
      <li>
        <a href="#8"><MenuKind kindid="8"></MenuKind></a>
      </li>
    </ul>
    <!-- 主菜单 -->
    <div class="menu">
      <!-- sorttext分类条名称 -->
      <MenuSort sorttext="推荐" id="0"></MenuSort>
      <!-- menuid：store.state.dishes[menuid]读取对应菜品名称、图片
           addid:store.state.addid[menuid]读取对应菜品加料-->
      <MenuDishlarge menuid="0" addid="0"></MenuDishlarge>
      <MenuDishlarge menuid="1" addid="0"></MenuDishlarge>
      <MenuDishlarge menuid="2" addid="0"></MenuDishlarge>
      <MenuSort sorttext="套餐" id="1"></MenuSort>
      <MenuDishlarge menuid="3" addid="0"></MenuDishlarge>
      <MenuDishlarge menuid="4" addid="0"></MenuDishlarge>
      <MenuSort sorttext="披萨" id="2"></MenuSort>
      <MenuDishsmall menuid="5" addid="0"></MenuDishsmall>
      <MenuDishsmall menuid="6" addid="0"></MenuDishsmall>
      <MenuDishsmall menuid="7" addid="0"></MenuDishsmall>
      <MenuDishsmall menuid="8" addid="0"></MenuDishsmall>
      <MenuDishsmall menuid="9" addid="0"></MenuDishsmall>
      <MenuDishsmall menuid="10" addid="0"></MenuDishsmall>
      <MenuSort sorttext="意面" id="3"></MenuSort>
      <MenuDishlarge menuid="11" addid="0"></MenuDishlarge>
      <MenuSort sorttext="汉堡" id="4"></MenuSort>
      <MenuDishlarge menuid="12" addid="0"></MenuDishlarge>
      <MenuSort sorttext="小吃" id="5"></MenuSort>
      <MenuDishlarge menuid="13" addid="0"></MenuDishlarge>
      <MenuSort sorttext="甜品" id="6"></MenuSort>
      <MenuDishlarge menuid="14" addid="0"></MenuDishlarge>
      <MenuSort sorttext="饮料" id="7"></MenuSort>
      <MenuDishlarge menuid="15" addid="0"></MenuDishlarge>
      <MenuSort sorttext="加料" id="8"></MenuSort>
      <MenuDishlarge menuid="16" addid="0"></MenuDishlarge>
    </div>
    <BottomBar></BottomBar>
  </div>
</template>

<script>
import MenuKind from '@/components/MenuKind.vue'
import MenuBanner from '@/components/MenuBanner.vue'
import MenuDishlarge from '@/components/MenuDishlarge.vue'
import MenuSort from '@/components/MenuSort.vue'
import BottomBar from '../components/BottomBar.vue'
import MenuDishsmall from '@/components/MenuDishsmall.vue'
import CustoMized from '@/components/CustoMized.vue'
import ShoppingCart from '@/components/ShoppingCart.vue'
export default {
  name: 'OrderView',
  components: {
    MenuKind,
    MenuBanner,
    MenuDishlarge,
    MenuSort,
    BottomBar,
    MenuDishsmall,
    CustoMized,
    ShoppingCart
  }
}
</script>
<style>
.order {
  width: 100vw;
}
.kind {
  position: sticky;
  top: 0px;
  list-style: none;
  padding: 0px;
  z-index: 5;
  background-color: rgb(238, 238, 238);
  width: 25%;
  height: 100%;
  border-radius: 0 10px 10px 0;
}
.menu {
  margin-left: 28vw;
  margin-top: -480px;
  /* position: absolute; */
}
</style>
